<template>
    <div>
<Form ref="form">
        <Row :gutter="24" type="flex">
            <Col span="4">
                   <DatePicker type="date" placeholder="请输入治疗日期" size="large"></DatePicker>
            </Col>
            <Col span="16">
            <Input v-model="value" style="width:360px" placeholder="请输入诊疗号" size="large"/>
            </Col>
            <Col span="4" class="ivu-text-right">
              <Button type="primary" size="large" @click="handleInput">录入治疗</Button>
            </Col>
        </Row>
    </Form>

        <Modal title="治疗一室-308项目" width="600" v-model="inputSearch" footer-hide>
            <Form>
            <FormItem>
            <Input v-model="value1" placeholder="请输入诊疗号" size="large"/>
            </FormItem>
            </Form>
            <Card dis-hover>
                <div slot="title"><strong class="h-3">张三</strong>
                <span class="ivu-ml-16">男 21</span>
                <span class="ivu-ml-16">诊疗号：9100024</span>
                <span class="ivu-ml-16"><tag color="primary">住院</tag></span>
                </div>
                <div slot="extra">
                <span class="surplus">正常剩余：<b class="success">26</b></span>
                <span class="surplus">援助剩余：<b class="warning">26</b></span>
                </div>
                <Row :gutter="12">
                      <i-Col span="16" class="footer-line">
                          <p>上次治疗时间：2020-03-21 16:03 </p>
                          <p>上次治疗数量：56 个</p></i-Col>
                      <i-Col span="8" class="ivu-text-righte"><Button type="primary" @click="handleAddTreatment" size="large">开始治疗</Button></i-Col>
               </Row>
            </Card>
        </Modal>
        <div orientation="left" class="u-tit">已治疗（268）</div>
        <Table :columns="columns" :data="data" :loading="loading" size="small" border >
            <template slot-scope="{ row, index }" slot="operation">
                <a @click='treatmentDetail'>详细</a>
                <Divider type="vertical" />
                <a @click='handleOneEdit'>修改</a>
            </template>
        </Table>
        <div class="ivu-mt iuv-text-center" slot="footer">
            <Page :total="100" show-elevator show-sizer show-total="" class="ivu-mt-16"></Page>
        </div>
        <Drawer title="治疗一室-308项目-录入治疗" width="800" v-model="addTeratment" :mask-closable="false">

        </Drawer>
        <Drawer title="修改" width="600" v-model="oneEdit">
            <div class="t-main">
                    <p class="time">2019-10-21 11:59</p>
                    <Table border :columns="columns2" :data="treatmentData" size="small">
                        <template slot-scope=" { row }" slot="bigPosition" >
                         <Select>
                             <Option> {{ row.bigPosition}} </Option>
                           </Select>
                        </template>
                        <template slot-scope="{ row }" slot="detailPosition">
                           <Select>
                             <Option> {{ row.detailPosition}} </Option>
                           </Select>
                        </template>
                        <template slot-scope="{ row }" slot="dose">
                           <Input v-model="row.dose" >
                           <span slot="append">mj</span>
                           </Input>
                        </template>
                        <template slot-scope="{ row }" slot="number">
                           <Input v-model="row.number" />
                        </template>
                    </Table>
                    <p class="ivu-m-16">本次治疗:<strong>10</strong>   本次剩余:<strong>6</strong> </p>
                    <Form inline>
                        <FormItem>
<Button @click="oneEdit = false" type="primary">确认</Button>
                        </FormItem>
                                                <FormItem>
<Button @click="oneEdit = false">取消</Button>
                        </FormItem>
                    </Form>
            </div>
        </Drawer>
        <Drawer title="详细" width="600" v-model="oneDetail">
            <div class="t-main">
                    <p class="time">2019-10-21 11:59</p>
                    <Table border :columns="columns1" :data="treatmentData" size="small"></Table>
                    <p class="ivu-m-16">本次治疗:<strong>10</strong>   本次剩余:<strong>6</strong> </p>
            </div>
        </Drawer>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                loading: false,
                addTreatment: false,
                oneDetail: false,
                oneEdit: false,
                dose: '300',
                number: '5',
                value: '',
                value1: '9100024',
                addTeratment: false,
                inputSearch: false,
                formSerach: '',
                city: '',
                labelPosition: 'left',
                formData: {
                    personnel: [],
                    Occupation: ''
                },
                formItem: {
                    select: ''
                },
                columns: [
                    {
                        title: '基本信息',
                        key: 'basic'
                    },
                    {
                        title: '诊室',
                        key: 'room'
                    },
                    {
                        title: '诊疗号',
                        key: 'number'
                    },
                    {
                        title: '治疗时间',
                        key: 'time'
                    },
                    {
                        title: '治疗数量',
                        key: 'treatmentNumber'
                    },
                    {
                        title: '操作人',
                        width: 118,
                        key: 'operationPerson'
                    },
                    {
                        title: '操作',
                        width: 118,
                        key: 'operation',
                        slot: 'operation'
                    }
                ],
                data: [
                    {
                        basic: '张三 男 22岁',
                        room: '三诊',
                        number: 1022658,
                        time: '2020-03-06 19:03',
                        treatmentNumber: 21,
                        operationPerson: '高玲',
                        operation: '详细'
                    },
                    {
                        basic: '王五 男 22岁',
                        room: '三诊',
                        number: 1022658,
                        time: '2020-03-06 19:03',
                        treatmentNumber: 23,
                        operationPerson: '高玲',
                        operation: '详细'
                    }
                ],
                columns1: [
                    {
                        title: '大部位',
                        key: 'bigPosition'
                    },
                    {
                        title: '细节部位',
                        key: 'detailPosition'
                    },
                    {
                        title: '剂量/时间',
                        key: 'dose'
                    },
                    {
                        title: '数量',
                        key: 'number'
                    }
                ],
                columns2: [
                    {
                        title: '大部位',
                        key: 'bigPosition',
                        slot: 'bigPosition'
                    },
                    {
                        title: '细节部位',
                        key: 'detailPosition',
                        slot: 'detailPosition'
                    },
                    {
                        title: '剂量/时间',
                        key: 'dose',
                        slot: 'dose'
                    },
                    {
                        title: '数量',
                        key: 'number',
                        slot: 'number'
                    }
                ],
                treatmentData: [
                    {
                        bigPosition: '头部',
                        detailPosition: '口部',
                        dose: '300',
                        number: '5'
                    },
                    {
                        bigPosition: '头部',
                        detailPosition: '口部',
                        dose: '300',
                        number: '5'
                    }
                ]
            }
        },
        methods: {
            handleDetail () {
                this.drawer = true;
            },
            treatmentDetail () {
                this.oneDetail = true;
            },
            handleOneEdit () {
                this.oneEdit = true;
            },
            handleAddTreatment () {
                this.addTeratment = true;
                this.inputSearch = false;
            },
            handleInput () {
                this.inputSearch = true;
            }

        }
    }
</script>
<style  lang="less" scoped>
    .list-card-list{
        &-desc{
            height: 85px;
            overflow: hidden;
        }
    }
    .v-tit {
        margin-bottom:8px;
    }
    .v-tit span {
        font-size:14px;
        margin-left:10px;
        color:#888;
    }
    .t-main p {
        color:#666;
        margin-bottom:8px;
    }
    .surplus {
        color:#777;
        margin-right:16px;
    }
    .surplus b {
        font-size:16px;
        margin-left:8px;
    }
    .t-main p strong {
        margin:0 10px;
        color:#333;
    }
    .consultant span {
        margin:0 5px;
    }
    .sky-screen {
        margin-top:16px;
    }
    .h-3 {
        font-size:16px;
        font-weight:bold;
    }
    .cont {
        padding-top:5px;
        font-weight:bold;
        font-size:16px;
    }
    .footer-line {
        line-height:26px;
    }
    .t-search {
        text-align:center;
        width:600px;
        margin:32px auto;
    }
    .u-tit {
        font-size:16px;
        font-weight:bold;
        margin:16px 0;
    }
    .success {
        color:#19be6b;
    }
    .warning {
        color:#ff9900;
    }
</style>
